This works! But it doesn't really need the additional handleSubmit function - try just passing in setSelectedCategory to the onClick event. Also - there's a way that you could deselect the Category here as well, how could this be done? Think about using a ternary, and the 'category' variable.

Hi @tkitson thank you so much for taking the time in to review the code and give further suggestions.

Indeed handleSubmit wasn't need and we toggle between select and deselect like this:

onClick={() =>
          setSelectedCategory(selectedCategory === category ? null : category)
  } 

This works! Using flex-wrap is a nice way of pushing items onto the next line when they don't fit. But can you find a way of making the images scale in size as well? Try using media queries on the products-item class, and something like:

width: calc(50% - 16px);

You'll need to adjust the percentages, and check to see if you need the gap value in the products class above

I think there should be a bit of space on the right here as well, for smaller devices like mobile

Hey @konjit nice work! I think we can tidy this up and also help the styling further: Let's say we want to have a four-column layout at the widest viewport size, we can say:

@media (min-width: 1600px) { .products--item { width: calc(25% - 16px); } }

and then for three columns at a smaller screen it would be 33%, followed by 50% for two cols, then for mobile you could just have 100% and then wouldn't need to change the flex direction like you've done in line 103.

The '-16px' bit is to offset the gap that you can add to the '.product' class, lets say of 8px.

This should also help to centre the content - at the moment there is a big gap at the right hand side when the content isn't filling the full viewport width.

I also think we could tidy this up a bit - see if you can move the logic outside of the render, and store it in a variable which is then mapped inside the component? E.g. const filteredProducts = !selectedCategory ? products : rest of logic here....